<template>
    <div class="box">
        <header class="header">
            <van-nav-bar title="注册豆瓣" left-text="x" left-arrow @click-left="router.go(-1)" />
            <p style="color: green;">新手机号将自动注册请详细读</p>
        </header>
        <main class="main">
            <van-form @submit="onSubmit">
                    <van-cell-group inset>
                        <van-field v-model="username" name="username" label="用户名" placeholder="用户名"
                            :rules="[{ required: true, message: '请填写用户名' }]" />
                        <van-field v-model="password" type="password" name="password" label="密码" placeholder="密码"
                            :rules="[{ required: true, message: '请填写密码' }]" />
                    </van-cell-group>
                    <div style="margin: 16px;">
                        <van-button round block type="primary" native-type="submit">
                            注册
                        </van-button>
                    </div>
                </van-form>

        </main>
    </div>
</template>

<script setup>
import { ref } from 'vue';
import request from '@/api/request'
import { showSuccessToast, showFailToast } from 'vant';
import { useRouter, } from 'vue-router'
const router=useRouter()

    const username = ref('');
    const password = ref('');
    const onSubmit = (values) => {
        request.post('/register',values).then(res=>{
        if(res.data.code==200){
            showSuccessToast('成功文案')
            router.push('/home')
        }else{
            showFailToast('失败文案');
        }
      })
    };

</script>

<style lang="scss" scoped></style>